<template>
  <div class="menu_container">
    <!--轮播图 为缓解一层不变的尬-->
    <div class="carousel_img">
      <el-carousel :interval="5000" arrow="hover">
        <el-carousel-item v-for="item in 4" :key="item">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--填充一些功能-->
    <div class="menu_card">
      <el-card class="box_card">
        <div slot="header">
          <span>工具列表</span>
        </div>
        <div class="item_tool" v-for="item in tools" :key="item.id" @click="pageJump(item.routerUrl)">
          <i :class="item.icon"/>
          {{ item.menuName }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      tools: []
    }
  },
  created () {
    this.getTools()
  },
  methods: {
    async getTools () {
      try {
        const { data: res } = await this.$http.post('/ajshow/user/tools')
        if (!res.status) return this.$message.error(res.msg ? res.msg : '获取用户工具信息异常')
        this.tools = res.data
      } catch (e) {
        this.$message.error(e.toString())
      }
    },
    pageJump (routerUrl) {
      this.$router.push(routerUrl)
    }
  }
}
</script>

<style lang="less" scoped>
  .carousel_img{
    height: 200px;
  }
  .menu_card{
    padding: 5px;
    .box_card{
      color: gray;
    }
  }
  ::v-deep .el-carousel__container{
    height: 200px !important;
    .el-carousel__item{
      height: 200px;
    }
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  }
</style>
